<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网页标题title -->
    <title>Document</title>
</head>
<body>
    <!-- 
        (1)标签分类：
            块级：换行
            行内：不换行
        (2)快捷键：
            1、编写多个标签，例如h1*3即为同时创建3个h1，例如h1*3
                <h1></h1>
                <h1></h1>
                <h1></h1>
            2、多个标签同时编写内容，且有一定排序，例如h1*3{$}
                <h1>1</h1>
                <h1>2</h1>
                <h1>3</h1>
            3、多个标签同时编写，且自定义内容，例如h1*3{标题$}
                <h1>标题1</h1>
                <h1>标题2</h1>
                <h1>标题3</h1>
    -->

    <!-- 
        1、文章标题h1-h6--hn块级
        注意：范围是h1-h6，若超出则无效
        特征：(1)字体缩放(2)字体加粗
     -->
     标题
     <h1>标题1</h1>
     <h2>标题2</h2>
     <h3>标题3</h3>

     <hr>
     <!-- 
        1、标签数量*n
        2、标签内容{}包裹
        3、变量$进行替代
        h$*3 
    -->
     <h1></h1>
     <h2></h2>
     <h3></h3>
     <!-- 
         标签内容{}包裹
        h$*3{标题$} 
    -->
     <h1>标题1</h1>
     <h2>标题2</h2>
     <h3>标题3</h3>
     <hr>


     <!-- 控制缩进Tab，撤销操作Ctrl+Z -->
     <!-- 快捷键语法：h$*6{标题内容$} -->
    <h1>标题内容1</h1>
    <h2>标题内容2</h2>
    <h3>标题内容3</h3>
    <h4>标题内容4</h4>
    <h5>标题内容5</h5>
    <h6>标题内容6</h6>
    <hr>
    <!-- 
        中文：偏向于抒情
        英文：偏向于逻辑 
    -->



    <!-- 
        2、分割线标签hr
        常用于分隔页面元素内容
    -->
    <hr>

    <!-- 
        3、文本标签span --行内：不换行
        常用于显示页面普通文本
    -->
    <!-- 快捷键语法span*3{文本$} -->
    <span>文本1</span>
    <span>文本2</span>
    <span>文本3</span>
    
    
    <hr>

    
    <!-- 
        4、p段落标签---块级：换行
        常用于显示页面段落(新闻、文章主要内容)
    -->
    <h2>文章简介</h2>
    <p>
        文章一：
        代表作品：雪豹、<b>裸婚时代</b>、失恋33天、海洋天堂、小爸爸、奋斗、西游·降魔篇、少帅、陆垚知马俐、剃刀边缘
        简介：文章，1984年6月26日出生于陕西省西安市，中国内地男代表作品：雪豹、裸婚时代、失恋33天、海洋天堂、小爸爸、奋斗、西游·降魔篇、少帅、陆垚知马俐、剃刀边缘
        简介：文章，1984年6月26日出生于陕西省西安市，中国内地男代表作品：雪豹、裸婚时代、失恋33天、海洋天堂、小爸爸、奋斗、西游·降魔篇、少帅、陆垚知马俐、剃刀边缘
        简介：文章，1984年6月26日出生于陕西省西安市，中国内地男代表作品：雪豹、裸婚时代、失恋33天、海洋天堂、小爸爸、奋斗、西游·降魔篇、少帅、陆垚知马俐、剃刀边缘
        简介：文章，1984年6月26日出生于陕西省西安市，中国内地男
    </p>
    <h2>文章八卦</h2>

    <!-- 
        5、换行标签br
        常用于“自定义”段落换行 
    -->
    <p>
        文章二：
        文章被拍到和一妙龄女子约会的照片,<br>
        照片中文章和女子面对面坐在一起,<br>
        文章穿着白色体恤戴着口罩帽子,<br>
        女子则一头长发,从侧面看起来非常美丽。
    </p>

    <!-- 
        6、文本标记类标签--没有换行，行内
        加粗b、倾斜i、下划线u、删除线s、上标sup、下标sub
    -->
    普通文本
    <b>加粗文本--突出重点文本</b>
    <i>倾斜文本--文章引用名人名言</i>
    <u>下划线--额外修饰文本</u>
    <!-- s删除线--删除原先文本，常用于原价和折扣的对比 -->
    原价<s>999</s>，限价99
    <!-- 上标数学表达式 -->
    2<sup>2</sup> = 4
    <!-- 下标化学表达式 -->
    H<sub>2</sub>O
    PM<sub>2.5</sub>

    <!-- 
        7、布局标签div---块级
        常用于页面布局 
    -->
    <div>布局标签1</div>
    <div>布局标签2</div>
    <div>布局标签3</div>

    <!-- H5新标签
        1、案例：H5新增了很多功能性标签，例如video视频、audio音频
        video--src为视频链接、controls为视频的控件
    -->
    <video 
        src="https://f.video.weibocdn.com/enYJKJeWlx07FtBhAJQk010412018ng10E010.mp4?labe
            l=mp4_ld&template=640x360.25.0&trans_finger=bdef57f06ae52835a2c783ca389e8517&or
            i=0&ps=1BVp4ysnknHVZu&Expires=1597128998&ssig=0n54lTZiUk&KID=unistore,video"
        controls
    >
        您的浏览器暂不支持，请更换浏览器
    </video>
    <!-- 2、音频 -->
    <audio src="http://www.0dutv.com/plug/down/up2.php/244625442.mp3" controls>
        您的浏览器暂不支持，请更换浏览器
    </audio>
</body>
</html>